<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>APP</title>
		<!--<link rel="stylesheet" type="text/css" href="../css/api.css" />-->
		<link rel="stylesheet" type="text/css" href="../css/aui.css" />
		<!--<link rel="stylesheet" type="text/css" href="../css/iconfontgaui.css" />-->
		<!--<link rel="stylesheet" type="text/css" href="../css/common.css" />-->
		<style>
			body {
				height: 100%;
				overflow-y: hidden;
			}
			#contain {
				left: 5px;
				top: 5px;
				margin: 0;
				width: 350px;
				height: 400px;
				position: absolute;
				background-color: black;
				border: 1px solid red;
			}
			/*垂直按钮*/
			.aui-btn-tab {
				width: 100%;
				background-color: #fff;
				display: box;
				display: -webkit-box;
				box-sizing: border-box;
				font-size: 12px;
				height: 55px;
			}
			.aui-btn-tab li {
				position: relative;
				text-align: center;
				color: #666;
				width: 100%;
				box-flex: 1;
				-webkit-box-flex: 1;
				box-sizing: border-box;
			}
			.aui-btn-tab li {
				font-size: 12px;
				margin-bottom: 0;
			}
			.aui-btn-tab .aui-iconfont {
				font-size: 22px;
				color: #666;
				padding-top: 5px;
				height: 30px;
				line-height: 30px;
				display: inline-block;
			}
			/*.aui-btn-tab li .aui-iconfont:active {
			 color: #16a085;
			 background-color: #bdc3c7;
			 }*/
			.aui-btn-tab li:active {
				color: #f1c40f;
				background-color: #bdc3c7;
			}
			.aui-btn-tab li:active p {
				color: #f1c40f;
				background-color: #bdc3c7;
			}
			.aui-btn-tab li:active span {
				color: #f1c40f;
				background-color: #bdc3c7;
			}
		</style>
	</head>
	<body>
		<canvas id='contain'></canvas>
		<footer class="aui-nav" id="footer">
			<ul class="aui-btn-tab">
				<!--<li class="active-warning" id="tabbar1" tapmode onclick="Interpolation();">
				<span class="aui-iconfont aui-icon-move1"></span>
				<p>
				插值
				</p>
				</li>-->
				<li id="tabbar2" tapmode onclick="OpenList();">
					<span class="aui-iconfont aui-icon-file"></span>
					<p>
						记录
					</p>
				</li>
				<li id="tabbar3" tapmode onclick="Clear();">
					<span class="aui-iconfont aui-icon-cut"></span>
					<p>
						清除
					</p>
				</li>
				<li id="tabbar4" tapmode onclick="Save(1)">
					<span class="aui-iconfont aui-icon-squarecheck"></span>
					<p>
						保存
					</p>
				</li>
				<li id="tabbar4" tapmode onclick="Save(2,Upload);">
					<span class="aui-iconfont aui-icon-upload"></span>
					<p>
						用作模板
					</p>
				</li>
				<li id="tabbar4" tapmode onclick="Verify();">
					<span class="aui-iconfont aui-icon-safe"></span>
					<p>
						认证
					</p>
				</li>
			</ul>
		</footer>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/sign.js"></script>
	<script type="text/javascript" src="../script/APICloud-rest-SHA1.js"></script>
	<script type="text/javascript" src="../script/signlist.js"></script>
	<script type="text/javascript" src="../script/debug.js"></script>
	<script type="text/javascript">
		var sig = null;
		var siglist = null;
		var signame = "测试";
		var sigtype = "_T_";
		var uid = null;
		//显示本机签名记录
		function OpenList() {
			if (!uid) {
				api.openWin({
					name : 'login_win',
					url : 'login_win.html',
					pageParam : {
					}
				});
				return;
			}
			api.openWin({
				name : 'siglist',
				url : 'siglist_win.html',
				vScrollBarEnabled : false,
				delay : 200
			});
		}

		function Verify() {
			Save(1, function() {
				api.showProgress({
					style : 'default',
					animationType : 'fade',
					title : '服务器认证中',
					text : '请稍等片刻...',
					modal : false
				});
				siglist.Verify(1, [], [-1], "Verify", function(k, arr, result, thr) {
					api.hideProgress();					
					if (result.score1[0] - result.thr >= 0) {
						alert("真实签名！");
					} else {						
						alert("伪造签名！");
					}
				});
			});
		}

		//重新绘制
		function Redraw() {
			sig.redraw(10);
		}

		//清除
		function Clear() {
			sig.clear();
			//sig.drawGrid();
		}

		//美化
		function Beautify() {
			sig.interpolation(10);
		}

		function Save(k, callback) {
			if (!uid) {
				api.openWin({
					name : 'login_win',
					url : 'login_win.html',
					pageParam : {
					}
				});
				return;
			}
			var name = signame + sigtype + sig.sigtime();
			siglist.LoadFileList(k, function(k1) {
				//alert(name)	;
				siglist.SaveFile(k1, name, sig.UrlString(), sig.toString(), function(ret, err) {
					if ( typeof callback == 'function')
						callback(k);
				});
			});
		};
		//上传
		function Upload(k) {
			if (!uid) {
				api.openWin({
					name : 'login_win',
					url : 'login_win.html',
					pageParam : {
					}
				});
				return;
			}
			siglist.Upload(k, [-1]);
		}

		apiready = function() {
			uid = $api.getStorage("uid");
			signame = $api.getStorage("signame") || '测试用户';
			var h = api.frameHeight;
			var w = api.frameWidth;
			var can = document.getElementById("contain");
			var foot = document.getElementById("footer");
			var pos = getOffset(foot);
			can.style.top = "0px";
			can.style.left = "0px";
			can.style.width = w - 0 + "px";
			can.style.height = h - 0 - pos.h + "px";
			if (!sig) {
				sig = new Sign("contain", 360, 450);
				sig.init();
				sig.setDevice({
					deviceName : api.deviceName,
					deviceModel : api.deviceModel,
					deviceId : api.deviceId,
					systemType : api.systemType,
					systemVersion : api.systemVersion
				});
			}
			if (!siglist) {
				siglist = new SignList(uid, signame);
				siglist.Init();
			}
			var headHight = api.winHeight - api.frameHeight;
			window.addEventListener("orientationchange", function() {
				var degree = window.orientation;
				var w = api.winWidth;
				var h = api.winHeight;
				var w1 = api.frameWidth;
				var h1 = api.frameHeight;
				if (w > h) {
					var t = w;
					w = h;
					h = t;
				}
				can.style.width = w - 0 + "px";
				can.style.height = h - 0 - pos.h + "px";
				sig.init();
				sig.degree = degree;
				if (degree == 0) {
					can.style.width = w - 0 + "px";
					can.style.height = h - headHight - pos.h + "px";
					sig.resize(w, h - headHight - pos.h);
					//sig.redraw(0);
				} else {
					can.style.width = h - 0 + "px";
					can.style.height = w - headHight - pos.h + "px";
					sig.resize(h, w - headHight - pos.h);
					//sig.redraw(0);
				}
			}, false);
			api.addEventListener({
				name : 'ChangeSigName'
			}, function(ret, err) {
				//console.log(ret.value);
				signame = ret.value.signame;
				sigtype = ret.value.sigtype;
			});
			// 监听是否注册或者登录成功
			api.addEventListener({
				name : 'reg_login_successEvent'
			}, function(ret) {
				if (ret && ret.value) {
					signame = ret.value.sig;
					uid = ret.value.uid;
					$api.setStorage("uid", uid);
					$api.setStorage("signame", signame);
					siglist = new SignList(uid, signame);
					if (!sig) {
						sig = new Sign("contain", 360, 450);
						sig.init();
						sig.setDevice({
							deviceName : api.deviceName,
							deviceModel : api.deviceModel,
							deviceId : api.deviceId,
							systemType : api.systemType,
							systemVersion : api.systemVersion
						});
					}
				}
			});
			// 监听新增用户魔板数据状态
			api.addEventListener({
				name : 'AddSign'
			}, function(ret) {
				//alert(JSON.stringify(ret));
				if (ret) {
					console.log(ret.value);
				}
			});
			api.addEventListener({
				name : 'SignParam'
			}, function(ret) {
				var param = $api.getStorage('param');
				if (param) {
					sig.param(param);
				}
			});
		};
	</script>
</html>